<template>
    <a-card :bordered="false">
        <title-name title="会议纪要"></title-name>
        <a-table bordered rowkey="fileType" :pagination="false" :columns="columnAssment" :data-source="dataAssement" :loading="loading">
            <template slot="serial"  slot-scope="text, record, index">{{ index + 1 }}</template>
            <template slot="fileInfo"  slot-scope="text, record, index">
              <span v-if="text">
                {{text.fileName}} {{text.suffixName}}
              </span>
              <span v-else></span>
            </template>
            <template slot="action"  slot-scope="text, record">
                <span v-if="!currentFile">
                  <a-upload name="file" :showUploadList='false'
                            :before-upload="beforeUpload"
                            :disabled="loading"
                            @change="handleChanges">
                      <a :loading="loading" type="primary" style="margin-bottom: 20px;" ><!-- v-if="showDelAndSub" -->
                          上传
                      </a>
                      <!--<div>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>-->
                  </a-upload>
                </span>
                <span v-else>
                  <a href="javascript:" v-if="!checkVisibleInDetail" @click="handleExportLimit">导出</a>
                  <a v-else :href="'/api/ycloud-file-center/oper/download?access_token='+token+'&fileId='+currentFile.fileId" target="_parent">导出</a>
                  <a-divider type="vertical" v-if="(!!uploadFile) && (!!currentFile)" />
                  <a @click="()=>deleteFiles(record)" v-show="(!!uploadFile) && (!!currentFile)">删除</a>
                </span>
            </template>
        </a-table>
        <div class="tool-btns"><!-- v-if="showDelAndSub" -->
        <!-- (!!uploadFile) 非null (!uploadFile) null -->
        <!-- (!!currentFile) 非null (!currentFile) null -->
            <a-button v-if="(!!uploadFile) && (!!currentFile)" @click="submitSummary" type="primary">保存会议纪要</a-button>
        </div>
    </a-card>
</template>

<script>
  import { checkVisibleInDetail } from '@/utils/util'
  import Vue from 'vue'
  import { uploadFile, deleteFile } from '@/api'
  import { reservationSummary } from '@/api/office/anualConference/index'

  const columnAssment = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: '10%',
      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '附件类型',
      dataIndex: 'fileType',
      width: '10%',
    },
    {
      title: '已上传附件',
      width: '15%',
      dataIndex: 'fileInfo',
      scopedSlots: { customRender: 'fileInfo' },
    },
    {
      title: '操作',
      key: 'action',
      width: '20%',
      scopedSlots: { customRender: 'action' },
    },
  ];
  export default {
    name: 'ConferenceSummary',
    components: {

    },
    props: {
      fileObj:{
        type:Object,
        value:{}
      },
      // 业务上传删除
      // 模块code
      businessCode:{
        type:String,
        value:''
      },
      isShow:{
        type:Boolean,
        default:true
      },
    },
    watch:{
      fileObj: {
        handler(nv, old) {
          if (nv) this.uploadedFile = nv;
        },
        deep: true
      }
    },
    data() {
      return {
        checkVisibleInDetail:checkVisibleInDetail(this),
        loading:false,
        uploaded: true,
        columnAssment,
        uploadFile: null,
        uploadedFile: null,
        // dataAssement:tableData,
        deleteObj:{},
        token:'',
      }
    },
    computed: {
      showDelAndSub: {
        get: function() {
          return this.isShow
        },
        set: function(v) {
          this.showDelAndSub = v
        }
      },
      currentFile() {
        return this.uploadedFile;
      },
      dataAssement() {
        const obj = {
          fileType: '会议纪要（必传）',
          fileInfo: this.currentFile
        }
        return [obj]
      }
    },
    created() { 
      if (this.fileObj) this.uploadedFile = this.fileObj;
      this.token = Vue.getAcloudProvider().getAccessToken()
    },
    methods: {
      handleExportLimit() {
        this.$message.warning('抱歉，app端无法导出，请在系统电脑端进行导出')
      },
      beforeUpload(info) {
        const { size } = info
        if (size / 1024 / 1024 > 500) {
          // 限制文件大小为200M
          this.$message.error('上传文件不可超出500M')
          this.uploadFile = null
          return false
        }
        this.uploadFile = info
        return false
      },

      handleChanges(info) {
        let that = this;
        const data = new FormData()
        data.append("file",this.uploadFile)
        data.append("businessCode",this.businessCode)
        this.loading = true
        uploadFile( data ).then(res => {
          if(res.code == 200 ){
            const data = res.data;
            this.uploadedFile = data;
          }
          that.loading = false
        }).catch(()=>{
          that.loading = false
        })
      },
      deleteFiles(record) {
        const _this = this
        let arr = []
        let commonId = record.fileInfo && record.fileInfo.commonId ? record.fileInfo.commonId : record.commonId
        arr.push(commonId)
        _this.$confirm({
          title: '删除',
          content: '确定删除附件吗？',
          onOk() {
            return new Promise((resolve, reject) => {
              _this.loading = true;
              deleteFile(arr).then((res) => {
                _this.loading = false;
                if (res && res.data && res.data.code == 200) {
                  _this.uploadedFile = null;
                  _this.$message.success('删除成功')
                  resolve(res)
                } else {
                  _this.$message.error('删除失败')
                  reject()
                }
              }).catch(() => {
                reject()
              })
            }).catch(() => {
              _this.loading = false;
              reject()
            });

          },
          onCancel() {},
        });
      },
      submitSummary() {
        if (!this.currentFile) {
          this.$message.error('请上传会议纪要！');
          return;
        }
        let _this = this;
        this.$confirm({
          title: '保存会议纪要',
          content: '请确认是否要提交会议纪要，提交后不可再次修改。',
          onOk() {
            _this.reservationSummary()
          }
        })
      },
      reservationSummary() {
        const param = {
          id: this.$route.query.id,
          meetingSummaryFile: this.uploadedFile?.commonId
        }
        reservationSummary(param).then((res) => {
          if (res && res.data && res.data.code == 200) {
            this.$message.success('保存会议纪要成功');
            this.uploadFile = null;
          } else {
            this.$message.error('保存会议纪要失败！');
          }
        }).catch(() => {
          console.log(111)
        })
      }
    }
  }

</script>

<style scoped>
  .tool-btns{
    margin-top: 10px;
  }
</style>
